<%--
  Created by IntelliJ IDEA.
  User: 任
  Date: 2020/4/17
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/jquery/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var id;//定时器的id,停止定时器时需要
        var count = 60;//倒计时的时间,单位是秒
        $(function () {
            $("#sendCode").click(function () {
                //获取手机号
                var phone = $("#phone").val();
                if (phone.length == 0) {
                    alert("手机号不能为空!");
                    return;
                }
                //禁用按钮
                $(this).attr("disabled", "disabled");
                //启动倒计时
                id = setInterval("time()", 1000);
                //发送ajax
                $.getJSON("/user/sendCode.do", {phone: phone}, function (result) {
                    if (result.msg("OK")) {
                        alert("验证码已发出!");
                    } else {
                        alert(result.msg);
                    }
                })
            })

            $("#btnLogin").click(function () {
                var code = $("#code").val();
                $.getJSON("/user/login.do", {code: code}, function (result) {
                    if (result.msg == "ok") {
                        location.href = "/jsp/success_login.jsp";
                    } else {
                        alert(result.msg);
                    }
                })
            })

        });

        function time() {
            //剩余时间
            count--;
            if (count == 0) {
                //取消禁用
                $("#sendCode").removeAttr("disabled");
                //恢复60s
                count = 60;
                $("#sendCode").val("重新发送");
                clearInterval(id);
            } else {
                //修改按钮文字
                $("#sendCode").val(count + "s后,重新发送");
            }
        }


        $(function () {
            $("#phone").blur(function () {
                var phone = $("#phone").val();
                $.getJSON("/user/id", {user: user}, function (data) {
                    //可用
                    if (data.user == "no") {
                        /*  $("#span").html("不可用").css("color","red");*/
                        alert("不可用");
                    } else {

                    }
                })
            })
        })

        function checked() {
            var one = $("#one").val();
            var two = $("#two").val();

            if(one!=two){
                $("#msg").html("俩次密码不一致!");
            }
        }

        $(function () {
            var tel = document.getElementById('tel'),
                telVal = tel.innerText;
            var newTelVal = '';
            if(telVal.length > 0){
                for(var i = 0; i < telVal.length; i++){
                    if(i < 3 || i >= telVal.length-3){
                        newTelVal += telVal[i];
                    }else{
                        newTelVal += '*';
                    }
                }
            }
            tel.innerText = newTelVal;
        })
    </script>
    <style>
        #a{
            border: 2px solid #b9def0;
            width: 500px;
            position: absolute;
            left: 300px;
            top: 100px;
        }
    </style>
</head>
<body>
<div id="a" class="container">
    <form action="/update/password?id=${user.id}" onsubmit="return checked()" method="post" class="form-inline">
<%--<input type="text" id="tel" value="${user.phone}"> <br>--%>
        用户绑定的手机号: <p id="tel">${user.phone}</p>
        手机号: <input type="text" onblur="userId()" id="phone" name="phone" placeholder="请输入手机号" class="form-control">
        <br>

        验证码:<input type="code" class="form-control" name="code" placeholder="验证码" required="" autofocus=""/>
        <input type="button" class="form-control" id="sendCode" value="发送验证码"><br>

        请设置新密码： <input type="text" name="userpassword" id="one" class="form-control"><br>
        再次输入新密码: <input type="text" name="two" id="two" class="form-control"><br>
        <span id="msg"></span>
        <input type="submit" class="form-control" value="确定">
        <button class="form-control" onclick="history.go(-1)">返回</button>
    </form>
</div>

</body>
</html>
